
<!DOCTYPE html>
<html>
<head>
    <title>Table from html</title>
   <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap-table.css">
    <link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">

    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    <script src="bootstrap-table.js"></script>
    <script src="extensions/resizable/bootstrap-table-resizable.js"></script>
    <script src="colResizable-1.5.source.js"></script>

    <script src="extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="jquery.dragtable.js"></script>
    <script src="extensions/cookie/bootstrap-table-cookie.js"></script>
</head>
<body>
     <div id="toolbar">
            <button id="button" class="btn btn-default">getSelections</button>
        </div>
<div class="container">
    <h1>Table from html</h1>
    <p>Transform table from an existing, unformatted html table.</p>
    <table id="table"   
               data-reorderable-columns="true" 
               data-resizable="false" 
               data-show-columns="true"  >
        <thead>
        <tr>
            <th id="Name2" data-field="Name" data-align="center">Name</th>
            <th id="Stars2" data-field="Stars"  data-align="center">Stars</th>
            <th id="Forks2" data-field="Forks" data-align="center">Forks</th>
            <th id="Description2" data-field="Description" data-halign="center">Description</th>
        </tr>
        </thead>
        <tbody>
        <tr id="tr-id-1" class="tr-class-1" data-title="bootstrap table" >
            <td data-halign="center" id="td-id-1" class="td-class-1" data-title="bootstrap table">
                <a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a>
            </td>
            <td data-value="526">526</td>
            <td data-text="122">122</td>
            <td data-i18n="Description">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
            </td>
        </tr>
        <tr id="tr-id-2" class="tr-class-2">
            <td id="td-id-2" class="td-class-2">
                <a href="https://github.com/wenzhixin/multiple-select">multiple-select</a>
            </td>
            <td>288</td>
            <td>150</td>
            <td>A jQuery plugin to select multiple elements with checkboxes :)
            </td>
        </tr>
        <tr id="tr-id-3" class="tr-class-3">
            <td id="td-id-3" class="td-class-3">
                <a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a>
            </td>
            <td>32</td>
            <td>11</td>
            <td>Show/hide password plugin for twitter bootstrap.
            </td>
        </tr>
        <tr id="tr-id-4" class="tr-class-4">
            <td id="td-id-4" class="td-class-4">
                <a href="https://github.com/wenzhixin/blog">blog</a>
            </td>
            <td>13</td>
            <td>4</td>
            <td>my blog</td>
        </tr>
        <tr id="tr-id-5" class="tr-class-5">
            <td id="td-id-5" class="td-class-5">
                <a href="https://github.com/wenzhixin/scutech-redmine">scutech-redmine</a>
            <td>6</td>
            <td>3</td>
            <td>Redmine notification tools for chrome extension.</td>
        </tr>
        </tbody>
    </table>
</div>
 <div class="container">
        <h1>Cookie</h1>
        <table id="table"
          data-resizable="true" 
               data-toggle="table"
               data-show-columns="true"
               data-cookie="true"
               data-cookie-id-table="saveId"
               data-pagination="true"
               data-search="true"
              data-reorderable-columns="true" 
               data-url="http://issues.wenzhixin.net.cn/examples/bootstrap_table/data"
               data-side-pagination="server">
            <thead>
            <tr>
                <th data-field="state" data-sortable="false" data-checkbox="true">
                <th data-field="id" data-align="center" data-sortable="true">ID</th>
                <th data-field="name" data-align="center"  data-sortable="true">Item Name</th>
                <th data-field="price" data-align="center"  data-sortable="true">Item Price</th>
            </tr>
            </thead>
        </table>
    </div>  
<script>
    var $table = $('#table'),
        $button = $('#button');

    $(function () {
        // $button.click(function () {
        //     alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getData')));
        // });
        $table.bootstrapTable();
    });
</script>
</body>
</html>
